<template>
    <div class="dashboard">
        <el-card class="item">
            <div slot="header">热门竞赛</div>
            <div class="right" ref="right">
            </div>
        </el-card>
        <el-card class="item">
            <div slot="header">热门项目</div>
            <div>
                <el-table
                :data="projectList"
                style="width: 100%">
                <el-table-column
                    prop="createdAt"
                    label="创建时间"
                    align="center"
                    width="width">
                </el-table-column>
                <el-table-column
                    prop="project_name"
                    label="项目名称"
                    align="center"
                    width="width">
                </el-table-column>
                <el-table-column
                    prop="view_number"
                    label="浏览量"
                    align="center"
                    width="width">
                </el-table-column>
            </el-table>
            </div>
        </el-card>
    </div>
</template>

<script>
import {getSortByVisits} from '@/api/competition'
import {getSortByVisitsConvene} from '@/api/convene'
export default {
    name: 'Dashboard',
    data() {
        return {
            name:'你好',
            projectList:[],
            option:{
                xAxis: {
                    type: 'category',
                    data: [],
                    axisLabel:{
                        rotate:20,
                        width:90,
                        overflow:'truncate',
                        // padding:10,
                    }
                },
                yAxis: {
                    name:'浏览量',
                    type: 'value'
                },
                series: [
                    {
                        data: [],
                        type: 'bar',
                        showBackground: true,
                        backgroundStyle: {
                            color: 'rgba(180, 180, 180, 0.2)'
                        }
                    }
                ]
            }
        }
    },
    mounted(){
        let myChart = this.$echarts.init(this.$refs.right)
        let names = []
        let datas =  []
        //获取竞赛列表
        getSortByVisits().then(res=>{
            let data = res.data.info
            data.forEach(item=>{
                // names.push({
                //     value:item.competition_name,
                //     textStyle:{
                //         width:100,
                //         overflow:'truncate'
                //     }
                // })
                names.push(item.competition_name)
                datas.push(item.page_view)
            })
            this.option.xAxis.data = names
            this.option.series[0].data = datas
            this.$nextTick(()=>{
                myChart.setOption(this.option)
            })
        })

        getSortByVisitsConvene().then(res=>{
            this.projectList = res.data.info
            this.projectList.forEach(item=>{
                item.createdAt = this.$moment(item.createaAt).format('YYYY-MM-DD HH:mm')
            })
        })
    }
}
</script>

<style lang="scss" scoped>
.dashboard{
    padding: 15px;
    display: flex;
}
.item{
    .right{
        width: 100%;
        height: 640px;
    }
    width: 50%;
    flex-shrink: 0;
    margin-right: 10px;
    height: 700px;
}
</style>
